<template>
    <view class="uni-container-member" :class="isVip?'memberNew':''">
        <div class="vipTop" v-if="isVip">
            <img class="bg" src="https://cdn.yueyangshuyuan.com/%E8%83%8C%E6%99%AF222.png" />
            <div class="profile-info-content clearfloat">
                <div class="leftImg">
                    <img src="https://cdn.yueyangshuyuan.com/personImg.png" alt="" class="profile-headImg" v-if="!headImgUrl">
                    <img :src="headImgUrl" alt="" class="profile-headImg" v-if="headImgUrl">
                </div>
                <div class="left">
                    <p class="bigFont">{{nickName}}</p>
                    <p class="smailFont">{{memberExpiredTime |changeDate}} 到期</p>
                </div>
                <div class="right"  @click="memberMerchOrderVipPaly">立即续费</div>
            </div>
        </div>
        <div class='menber-top' v-if="!isVip">
            <img src="https://cdn.yueyangshuyuan.com/topbeijing.png" alt="" class='bg'>
            <img src="https://cdn.yueyangshuyuan.com/%E4%BC%9A%E5%91%98%E5%8D%A1%E7%89%87.png" alt="" class='card'>
            <img src="https://cdn.yueyangshuyuan.com/sandatequan.png" alt="" class='title'>
        </div>
        <div class='menber-cnter'>
            <div class='cent-title'>
                <img src="https://cdn.yueyangshuyuan.com/dian.png" alt="" class='card'>
                <span>阅阳会员专属权益</span>
            </div>
            <ul class='menber-list'>
                <li>
                    <img src="https://cdn.yueyangshuyuan.com/back1.png" alt="" class='bg'>
                    <img src="https://cdn.yueyangshuyuan.com/quan1.png" alt="" class='title'>
                    <div class='docs'>
                        <img src="https://cdn.yueyangshuyuan.com/a1.png" alt="" class='icon'>
                        <div class=' detail'>
                            <h3>专属会员折扣</h3>
                            <span>商品/行程享受尊贵会员价，最低可享受9.5折优惠</span>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="https://cdn.yueyangshuyuan.com/back1.png" alt="" class='bg'>
                    <img src="https://cdn.yueyangshuyuan.com/quan2.png" alt="" class='title'>
                    <div class='docs'>
                        <img src="https://cdn.yueyangshuyuan.com/a2.png" alt="" class='icon'>
                        <div class=' detail'>
                            <h3>双倍积分奖励</h3>
                            <span>会员尊享双倍积分</span>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="https://cdn.yueyangshuyuan.com/back1.png" alt="" class='bg'>
                    <img src="https://cdn.yueyangshuyuan.com/quan3.png" alt="" class='title'>
                    <div class='docs'>
                        <img src="https://cdn.yueyangshuyuan.com/a3.png" alt="" class='icon'>
                        <div class=' detail'>
                            <h3>会员专属客服热线</h3>
                            <span>超级会员享有24小时客服专线，配有专属客服，竭诚提供更专业、更优质的服务</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class='menber-bottom clearfix'>
            <img src="https://cdn.yueyangshuyuan.com/bot.png" alt="" class='icon'>
            <span class="fl price">¥ <span>{{memberLIst.realPrice}}</span> 元 / 
                {{memberLIst.unit=='YEAR'?'年':memberLIst.unit=='MONTH'?'月':memberLIst.unit=='WEEK'?'周':'天'}}
            </span>
            <span class="fl oldPrice">原价{{memberLIst.price}}元/<span>{{memberLIst.unit=='YEAR'?'年':memberLIst.unit=='MONTH'?'月':memberLIst.unit=='WEEK'?'周':'天'}}</span></span>
            <span class="fr openBtn" @click="memberMerchOrderVipPaly" v-if="!isVip">立即开通</span>
            <span class="fr openBtn" @click="memberMerchOrderVipPaly" v-if="isVip">立即续费</span>
        </div>
        <!-- <Tabbar></Tabbar> -->
    </view>
</template>
<script>
import Tabbar from '../../components/tabber.vue';
import {FormatDate} from "../../util.js"
export default {
    components: {
        Tabbar
    },
    data(){
        return{
            memberLIst:"",
            isVip:false,
            headImgUrl:"",
            nickName:"",
            memberExpiredTime:""
        }
    },
    mounted(){
        this.init();
    },
    methods: {
        init(){
            //getUser  获取是否是超级会员
            this.$api.getUser({
                
            }).then((json)=>{
                this.isVip=json.data.member;
                this.headImgUrl=json.data.headImgUrl;
                this.nickName=json.data.nickName;
                this.memberExpiredTime=json.data.memberExpiredTime;
            })
            this.$api.defaultVip({
                        
            }).then((json)=>{
                this.memberLIst=json;
            })
           
        },
        //点击立即开通
        memberMerchOrderVipPaly(){
            uni.navigateTo({
				url: '/pages/vipPlay/vipPlay?merchId='+this.memberLIst.id
			});
        }
    },
    filters: {
        changeDate(date) {
          let time= FormatDate(new Date(Number(date)),'yyyy-MM-dd hh:mm'); //日期
          return time;
        }
  },
}
</script>
<style lang='scss'>
    .fl {
		float: left;
		display: inline;
	}
	.fr {
		float: right;
		display: inline;
	}
	.clearfix:after {
		clear: both;
		content: ".";
		display: block;
		font-size: 0;
		height: 0;
		line-height: 0;
		visibility: hidden;
	}
	.clearfix {
		clear: both;
		zoom: 1;
	}
    .uni-container-member{
        width: 100%;
        margin-bottom:100upx;
        .menber-top{
            position: relative;
            height: 464upx;
            .bg{
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
            }
            .title{
                width: 622upx;
                height:49upx;
                position: absolute;
                top: 80upx;
                left: 50%;
                transform: translateX(-50%);
            }
            .card{
                width: 100%;
                height: 380upx;
                position: absolute;
                bottom: -58upx;
                left: 0;
            }
        }
        .menber-cnter{
            background: #FDF3E9;
            // padding-bottom: 180upx;
            padding-bottom: 60upx;
            .cent-title{
                padding-top: 94upx;
                // padding-bottom: 30upx;
                position: relative;
                .card{
                    width: 458upx;
                    height: 18upx;
                    position: absolute;
                    top: 111upx;
                    left:50%;
                    transform: translateX(-50%);
                }
                >span{
                    font-size: 36upx;
                    color: #262626;
                    width: 100%;
                    display: block;
                    text-align: center;
                    font-weight: bold;
                }
            }
            .menber-list{
                >li{
                    margin-bottom: 20upx;
                    position: relative;
                    height: 326upx;
                    .bg{
                        width: 100%;
                        height: 385upx;
                        position: absolute;
                        top: 0;
                        left: 0;
                        z-index: 1;
                    }
                    .title{
                        width: 446upx;
                        height: 36upx;
                        position: absolute;
                        top: 64upx;
                        left:50%;
                        transform: translateX(-50%);
                        z-index: 2;
                    }
                    .docs{
                        z-index: 3;
                        position: absolute;
                        width: 100%;
                        display: flex;
                        top: 158upx;
                        height: 130upx;
                        align-items: center;
                        .icon{
                            width: 130upx;
                            height: 130upx;
                            margin-left: 88upx;
                        }
                        .detail{
                           width: 450upx;
                           margin-left: 38upx;
                            >h3{
                                font-size: 32upx;
                                color: #262626;
                                font-weight: bold;
                            }
                            >span{
                                margin-top: 10upx;
                               font-size: 24upx;
                                color: #777777; 
                            }
                        }
                    }
                }
            }
        }
        .menber-bottom{
            height: 120upx;
            position: fixed;
            bottom: 0;
            left: 0;
            width:100%;
            z-index: 5;
            padding-left: 26upx;
            padding-right: 35upx;
            box-sizing: border-box;
            background: #FFFFFF;
            >img{
               width:100%; 
               height: 100%;
               position: absolute;
               top: 0;
               left: 0;
               z-index: -1;
            }
            .price{
                font-size: 32upx;
                color: #FF7715;
                line-height: 120upx;
                >span{
                    font-size: 64upx;
                }
            }
            .oldPrice{
                font-size: 24upx;
                color: #ACACAC;
                text-decoration:line-through ;
                line-height: 152upx;
                padding-left: 10upx;
            }
            .openBtn{
                font-size: 32upx;
                color: #FFFFFF;
                line-height: 120upx;
            }
        }
    }

    .uni-container-member .vipTop {
          position: relative;
           width:100%;
            height:240upx;
        .bg {
            position: absolute;
            left:0;
            top:0;
            z-index:1;
            width:100%;
            height:240upx;
        }
    } 
    .memberNew .menber-cnter .cent-title{
        padding-top:40upx;
    }
      .profile-info-content{
          width:100%;
        height: 240upx;
        position: absolute;
        left:0;
        top:0;
        z-index:9;
        .profile-headImg{
            width: 140upx;
            height: 140upx;
            border-radius: 50%;
            box-sizing: border-box;
            border: 4upx solid #FFFFFF;
            background: #fff;
        }
        .profile-userName{
            font-size: 38upx;
            color: #262626;
            font-weight: bold;
            line-height: 140upx;
            position: relative;
            top: -54upx;
            left: 26upx;
        }
        .leftImg {
            float: left;
            margin:50upx 30upx;
        }
        .left {
            float: left;
            height:140upx;
            margin:50upx 0upx;
            .bigFont {
                font-size: 40upx;
                color: #FFFFFF;
                line-height:90upx;
            }
            .smailFont {
                font-size: 24upx;
                color: #FFFFFF;
            }
        }
        .right {
            float: right;
            width:174upx;
            height:56upx;
            background: #fff;
            border-radius: 28upx;
            text-align: center;
            line-height: 56upx;
            font-size: 28upx;
            color: #FE720C;
            margin-top:92upx;
            margin-right:30upx;
        }
    }
</style>
